<template>
  <div>
    <h1>仓库管理</h1>

    <el-form :inline="true" :model="queryStash" class="demo-form-inline">
      <el-form-item label="仓库名称">
        <el-input v-model="queryStash.name" placeholder="仓库名称"></el-input>
      </el-form-item>
      <el-form-item label="仓库地址">
        <el-input v-model="queryStash.address" placeholder="仓库地址"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="queryStash.type" placeholder="类型">
          <el-option v-for="t in types" :label="t.name" :value="t.id" :key="t.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用">
        <el-select v-model="queryStash.enable" placeholder="启用">
          <el-option label="启用" :value="0" ></el-option>
          <el-option label="未启用" :value="1" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否默认">
        <el-input v-model="queryStash.acquiesce" placeholder="是否默认"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button @click="chongzhi" type="success">重置</el-button><br>
      </el-form-item>
    </el-form>

    <el-button @click="opAdd" type="success">添加</el-button>
    <el-button @click="updateAll" type="warning">修改</el-button>
    <el-button @click="delAll" type="danger">删除</el-button>
    <el-button @click="daochu" type="success">导出</el-button>

    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="仓库名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="storageMoney"
          label=仓储费>
      </el-table-column>
      <el-table-column
          prop="cartageMoney"
          label="搬运费">
      </el-table-column>
      <el-table-column
          prop="tname"
          label="类型">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="电话">
      </el-table-column>
      <el-table-column
          label="是否启用">
        <template v-slot="s">
          <el-tag v-if="s.row.enable==0">启用</el-tag>
          <el-tag v-if="s.row.enable==1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="acquiesce"
          label="是否默认">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="s">
          <el-button @click="openupdate(s.row)" type="text">修改</el-button>
          <el-button @click="del(s.row.id)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>、

    <el-dialog title="添加管理" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="name">
          <el-input placeholder="请输入仓库名称" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input placeholder="请输入地址" v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓促费" :label-width="formLabelWidth">
          <el-input placeholder="请输入仓促费" v-model="form.storageMoney" autocomplete="off">
            <template slot="append">元/天KG</template>
          </el-input>
        </el-form-item>
        <el-form-item label="搬运费" :label-width="formLabelWidth">
          <el-input placeholder="请输入搬运费" v-model="form.cartageMoney">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select  v-model="form.type" placeholder="请输入类型">
            <el-option  v-for="t in types" :label="t.name" :value="t.id" :key="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input placeholder="请输入电话" v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input placeholder="请输入排序" v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.describes">
          </el-input>
        </el-form-item>
        <el-form-item label="启用" :label-width="formLabelWidth">
          <el-radio-group v-model="form.enable">
            <el-radio label="0" > 启动</el-radio>
            <el-radio label="1" >停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否默认" :label-width="formLabelWidth">
          <el-radio-group v-model="form.acquiesce">
            <el-radio label="是" ></el-radio>
            <el-radio label="否" ></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form1" :rules="rules1" ref="ruleForm1">
        <el-form-item label="仓库名称" :label-width="formLabelWidth1" prop="name">
          <el-input placeholder="请输入仓库名称" v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth1">
          <el-input placeholder="请输入地址" v-model="form1.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓促费" :label-width="formLabelWidth1">
          <el-input placeholder="请输入仓促费" v-model="form1.storageMoney" autocomplete="off">
            <template slot="append">元/天KG</template>
          </el-input>
        </el-form-item>
        <el-form-item label="搬运费" :label-width="formLabelWidth1">
          <el-input placeholder="请输入搬运费" v-model="form1.cartageMoney">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth1">
          <el-select  v-model="form1.type" placeholder="请输入类型">
            <el-option  v-for="t in types" :label="t.name" :value="t.id" :key="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth1" >
          <el-input placeholder="请输入电话" v-model="form1.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth1">
          <el-input placeholder="请输入排序" v-model="form1.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth1">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form1.describes">
          </el-input>
        </el-form-item>
        <el-form-item label="启用" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.enable">
            <el-radio label="0" > 启动</el-radio>
            <el-radio label="1" >停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否默认" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.acquiesce">
            <el-radio label="是" ></el-radio>
            <el-radio label="否" ></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpdate">取 消</el-button>
        <el-button type="primary" @click="update('ruleForm1')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {API} from "@/api/config";

export default {
  name: "StashView",
  data() {
    return {
      tableData:{},
      current:2,
      size:1,
      total:0,
      queryStash:{},
      types:[],
      dialogFormVisible:false,
      formLabelWidth:'160px',
      form:{},
      rules:{
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
        ],
      },
      rules1:{
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
        ],
      },
      form1:{},
      dialogFormVisible1:false,
      formLabelWidth1:'120px',
      ids:[]
    }
  }, methods: {
    handleSelectionChange(rows){
      this.ids=rows.map(item =>item.id).join(",")
    },
    handleCurrentChange(current){
      this.current=current;
      this.list();
    },
    list(){
      this.axios.post("/stash/list?current="+this.current+"&size="+this.size,this.queryStash).then(r =>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
      })
    },
    getTlist(){
      this.axios.post("/stash/tlist").then(r =>{
        this.types=r.data.data;
        console.log(this.types)
      })
    },
    chongzhi(){
      location.reload();
    },
    opAdd(){
      this.dialogFormVisible=true;
    },
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/stash/add",this.form).then(() =>{
            this.$message.success("添加成功");
            this.dialogFormVisible=false;
            this.list();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    openupdate(row){
      console.log(row)
      this.form1=row;
      this.dialogFormVisible1=true;
    },
    update(row){
      this.axios.post("/stash/update?id="+row.id,this.form1).then(() =>{
        this.$message.success("修改成功");
        this.dialogFormVisible1=false;
        this.list();
      })
    },
    del(id){
      this.axios.post("/stash/del?id="+id).then(() =>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    closeAdd(){
      this.dialogFormVisible=false;
    },
    closeUpdate(){
      this.dialogFormVisible1=false;
    },
    delAll(){
      this.axios.post("/stash/delAll?ids="+this.ids).then(() =>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    updateAll(){
      this.dialogFormVisible1=true;
      this.axios.post("/stash/getById?id="+this.ids).then(r =>{
        if (this.ids.length==1){
          console.log(r+"============")
          this.form1=r.data.data;
        }else{
          this.$message.error("只能选择一个")
        }
      })
    },
    daochu(){
      window.location.href=API+"/stash/daochu"
    }
  }, created() {
    this.list();
    this.getTlist();

  }
}
</script>

<style scoped>

</style>